<!doctype html>
<html>

<head>
	<!doctype html>
	<html>
	<head>
		<meta charset="utf-8">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>手机价格数据可视化</title>
		<!--大屏-->
		<link type="text/css" href="/static/css/public.css" rel="stylesheet">
		<link type="text/css" href="/static/css/icon.css" rel="stylesheet">
		<link type="text/css" href="/static/css/job.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="static/css/style.css">
	<!--首页的CSS-->
	<link rel="stylesheet" type="text/css" href="static/css/index.css">
	<!--引入网页标题图标-->
	<link rel="shortcut icon" type="static/image/x-icon" href="static/img/favicon.ico">
	<link rel="stylesheet" type="text/css" href="static/css/aa.css">
		<script src="/static/js/jquery-3.1.1.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			document.documentElement.style.fontSize = document.documentElement.clientWidth / 768 * 100 + 'px';
		</script>
		<script src="/static/js/echarts.min.js"></script>
	</head>

<body>

<div class="page-top">
	<div class="container">
	<div class="top-lt">
		<a href="{{ url_for('index') }}">小米商城</a>
			<span>|</span>
		<a href="">MIUI</a>
			<span>|</span>
		<a href="">IoT</a>
			<span>|</span>
		<a href="">云服务</a>
			<span>|</span>
		<a href="">金融</a>
			<span>|</span>
		<a href="">有品</a>
			<span>|</span>
		<a href="">小爱开放平台</a>
			<span>|</span>
		<a href="">企业团购</a>
			<span>|</span>
		<a href="">资质证照</a>
			<span>|</span>
		<a href="">协议规则</a>
			<span>|</span>
		<a href="" class="download">下载app
			<div class="down-box">
				<img src="static/img/download.png" alt="小米商城">
				小米商城APP
			</div>
		</a>
			<span>|</span>
		<a href="{{ url_for('index') }}">退出可视化 </a>
	</div>

	<div class="top-gt">
		<div class="login">
			{% if session['logged_in'] %}
                                <span class="username">欢迎{{session['username']}}登录</span>
									<a href="/product_board">商品管理</a>
                                <a href="/logout">退出</a>
                            {% else %}
                                <a href="/login">登录</a>
                            {% endif %}
			<span>|</span>
			<a href="register">注册</a>
			<span>|</span>

		</div>
		<!--<div class="userinfo">
			<a href="" class="link">消息通知</a>
			<a href="" class="link">我的订单</a>
			<div class="user">
				<a href="" class="tit">用户~~</a>
				<ul>
				<li><a href="">个人中心</a></li>
				<li><a href="">评价晒单</a></li>
				<li><a href="">我的喜欢</a></li>
				<li><a href="">小米账号</a></li>
				<li><a href="">退出登录</a></li>
				</ul>
			</div>
-->		</div>
	</div>
	</div>
</div>

	<div class="bg">
		<!-- 底层背景动画-开始 -->
		<div id="animations">
			<div class="animation animation1">
				<div class="animate1"></div>
				<div class="animate2"></div>
				<div class="animate3"></div>
			</div>
			<div class="animation animation2">
				<div class="animate1"></div>
				<div class="animate2"></div>
				<div class="animate3"></div>
			</div>
			<!-- <div class="animation animation3 fanzhuan">
				<div class="animate1"></div>
				<div class="animate2"></div>
				<div class="animate3"></div>
			</div> -->
			<!-- <div class="animation animation4">
				<div class="animate1"></div>
				<div class="animate2"></div>
				<div class="animate3"></div>
			</div> -->
			<!-- <div class="animation animation5 fanzhuan">
				<div class="animate1"></div>
				<div class="animate2"></div>
				<div class="animate3"></div>
			</div> -->
			<div class="animation animation6">
				<div class="animate1"></div>
				<div class="animate2"></div>
				<div class="animate3"></div>
			</div>
			<div class="animation animation7 fanzhuan">
				<div class="animate1"></div>
				<div class="animate2"></div>
				<div class="animate3"></div>
			</div>
			<!-- <div class="animation animation8">
				<div class="animate1"></div>
				<div class="animate2"></div>
				<div class="animate3"></div>
			</div> -->
			<!-- <div class="animation animation9 fanzhuan">
				<div class="animate1"></div>
				<div class="animate2"></div>
				<div class="animate3"></div>
			</div> -->
			<!-- <div class="animation animation10">
				<div class="animate1"></div>
				<div class="animate2"></div>
				<div class="animate3"></div>
			</div> -->
		</div>
		<div class="title">手 机 价 格 数 据 可 视 化</div>
		<div class="leftMain">
			<div class="leftMain_top">
				<div class="leftMain_topIn">
					<ul>
						<li>
							<div class="liIn">
								<h3>企业数</h3>
								<p class="shu"><span class="shu11">xxx</span><i>家</i></p>
								<!-- <div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div> -->
								<span class="border_bg_leftTop"></span>
								<span class="border_bg_rightTop"></span>
								<span class="border_bg_leftBottom"></span>
								<span class="border_bg_rightBottom"></span>
							</div>
						</li>
						<li>
							<div class="liIn">
								<h3>岗位数</h3>
								<p class="shu"><span class="shu22">xxx</span><i>个</i></p>
								<!-- <div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div> -->
								<span class="border_bg_leftTop"></span>
								<span class="border_bg_rightTop"></span>
								<span class="border_bg_leftBottom"></span>
								<span class="border_bg_rightBottom"></span>
							</div>
						</li>
						<li>
							<div class="liIn">
								<h3>平均工资</h3>
								<p class="shu"><span class="shu33">xxx</span><i>元</i></p>
								<!-- <div class="zi"><span class="span1">小标题：文字</span><span>小标题：文字</span></div> -->
								<span class="border_bg_leftTop"></span>
								<span class="border_bg_rightTop"></span>
								<span class="border_bg_leftBottom"></span>
								<span class="border_bg_rightBottom"></span>
							</div>
						</li>
					</ul>
					<script type="text/javascript">
						$.ajax({
							url: '/get_company',
							type: 'get',
							dataType: "json", //返回数据格式为json
							success: function (data) {//请求成功完成后要执行的方法
								console.log("---------------------------");
								console.log(data);
								let shu1 = document.getElementsByClassName('shu11')[0]
								let shu2 = document.getElementsByClassName('shu22')[0]
								let shu3 = document.getElementsByClassName('shu33')[0]
								shu1.textContent = data['company_num']
								shu2.textContent = data['job_num']
								shu3.textContent = data['avg_salary']
								$(".shu11").numScroll();
								$(".shu22").numScroll();
								$(".shu33").numScroll();
							}
						})
					</script>
				</div>
			</div>
			<div class="leftMain_middle">
				<div class="leftMain_middle_left">
					<div class="leftMain_middle_leftIn">
						<h3>各系列手机价格</h3>
						<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
						<div class="biaoge" style="width:100%; height:25vh" id="chartmain"></div>
						<script type="text/javascript">
							$.ajax({
								url: "/get_industry",//同文件夹下的json文件路径
								type: "GET",//请求方式为get
								dataType: "json", //返回数据格式为json
								success: function (data) {//请求成功完成后要执行的方法
									console.log(data);
									//指定图表的配置项和数据
									var dataAxis = data['industry_type'];
									var data_value = data['industry_type_value']
									var yMax = 500;
									var dataShadow = [];

									for (var i = 0; i < data.length; i++) {
										dataShadow.push(yMax);
									}

									option = {
										title: {
											text: '',
											subtext: ''
										},
										grid: {
											x: 40,
											y: 40,
											x2: 20,
											y2: 20,

										},
										tooltip: {
											show: true,
										},
										xAxis: {
											data: dataAxis,
											axisLabel: {
												interval: 0,
												textStyle: {
													color: '#fff',
													fontSize: 8
												}
											},
											axisTick: {
												show: false,
											},
											axisLine: {
												show: true,
												symbol: ['none', 'arrow'],
												symbolOffset: 12,
												lineStyle: {
													color: '#fff',
												}
											},
											z: 10
										},
										yAxis: {
											type: 'value',
											name: '单位：元',
											axisLine: {
												show: true,
												symbol: ['none', 'arrow'],
												symbolOffset: 12,
												lineStyle: {
													color: '#fff',
												}
											},
											axisTick: {
												show: false
											},
											axisLabel: {
												textStyle: {
													color: '#fff',
													fontSize: 14
												}
											},
											splitLine: {
												show:false
											}
										},

										dataZoom: [
											{
												type: 'inside'
											}
										],
										series: [
											{ // For shadow
												type: 'bar',
												label: {
													show: true,
													position: 'top',
													color: 'white'
												},
												itemStyle: {
													color: 'rgba(0,0,0,0.05)'
												},
												barGap: '-100%',
												barCategoryGap: '40%',
												data: dataShadow,
												animation: false
											},
											{
												type: 'bar',
												label: {
													show: true,
													position: 'top',
													color: 'white'
												},
												itemStyle: {
													color: new echarts.graphic.LinearGradient(
														0, 0, 0, 1,
														[
															{ offset: 0, color: '#0efdff' },
															{ offset: 0.5, color: '#188df0' },
															{ offset: 1, color: '#188df0' }
														]
													)
												},
												emphasis: {
													itemStyle: {
														color: new echarts.graphic.LinearGradient(
															0, 0, 0, 1,
															[
																{ offset: 0, color: '#2378f7' },
																{ offset: 0.7, color: '#2378f7' },
																{ offset: 1, color: '#0efdff' }
															]
														)
													}
												},
												data: data_value
											}
										]
									};

									//获取dom容器
									var myChart = echarts.init(document.getElementById('chartmain'));
									// 使用刚指定的配置项和数据显示图表。
									myChart.setOption(option);
								}
							})
						</script>
						<span class="border_bg_leftTop"></span>
						<span class="border_bg_rightTop"></span>
						<span class="border_bg_leftBottom"></span>
						<span class="border_bg_rightBottom"></span>
					</div>
				</div>
				<div class="leftMain_middle_right">
					<div class="leftMain_middle_rightIn">
						<h3>各行业招聘人数</h3>
						<div class="biaoge biaoge_pai" style="width:100%; height:25vh">
							<div class="biaoge_paiIn">
								<ul class="recruit_people">
									<li>
										<div class="liIn">
											<div class="liIn_left"><span class="bot"></span><span class="industry1">第一名</span></div>
											<div class="liIn_line">
												<div class="line_lineIn" ></div>
											</div>
											<p class="num">xxxx元</p>
										</div>
									</li>
									<li>
										<div class="liIn liIn2">
											<div class="liIn_left"><span class="bot"></span><span class="industry2">第二名</span></div>
											<div class="liIn_line">
												<div class="line_lineIn" ></div>
											</div>
											<p class="num">xxxx元</p>
										</div>
									</li>
									<li>
										<div class="liIn liIn3">
											<div class="liIn_left"><span class="bot"></span><span class="industry3">industry3</span></div>
											<div class="liIn_line">
												<div class="line_lineIn" ></div>
											</div>
											<p class="num">xxxx元</p>
										</div>
									</li>
									<li>
										<div class="liIn liIn4">
											<div class="liIn_left"><span class="bot"></span><span class="industry4">第四名</span></div>
											<div class="liIn_line">
												<div class="line_lineIn" ></div>
											</div>
											<p class="num">xxxx元</p>
										</div>
									</li>
									<li>
										<div class="liIn liIn5">
											<div class="liIn_left"><span class="bot"></span><span class="industry5">第五名</span></div>
											<div class="liIn_line">
												<div class="line_lineIn" ></div>
											</div>
											<p class="num">xxxx元</p>
										</div>
									</li>
									<li>
										<div class="liIn liIn6">
											<div class="liIn_left"><span class="bot"></span><span class="industry6">第六名</span></div>
											<div class="liIn_line">
												<div class="line_lineIn" ></div>
											</div>
											<p class="num">xxxx元</p>
										</div>
									</li>
								</ul>
								<script type="text/javascript">
									$.ajax({
										url: "/static/page_data/page_data.json",//同文件夹下的json文件路径
										type: "GET",//请求方式为get
										dataType: "json", //返回数据格式为json
										success: function (data) {//请求成功完成后要执行的方法
											//console.log(data);
											industry_recruit_people_type = data['industry_recruit_people_type']
											let industry1 = document.getElementsByClassName('industry1')[0]
											let industry2 = document.getElementsByClassName('industry2')[0]
											let industry3 = document.getElementsByClassName('industry3')[0]
											let industry4 = document.getElementsByClassName('industry4')[0]
											let industry5 = document.getElementsByClassName('industry5')[0]
											let industry6 = document.getElementsByClassName('industry6')[0]
											industry1.textContent = industry_recruit_people_type[0]
											industry2.textContent = industry_recruit_people_type[1]
											industry3.textContent = industry_recruit_people_type[2]
											industry4.textContent = industry_recruit_people_type[3]
											industry5.textContent = industry_recruit_people_type[4]
											industry6.textContent = industry_recruit_people_type[5]

											let numbers = document.querySelectorAll('li .num')
											numbers.forEach((item, idx) => {
												item.textContent = data['industry_recruit_people_value'][idx]+'人'
											})

											let styles = document.querySelectorAll('li .liIn_line .line_lineIn')
											styles.forEach((item, idx) => {
												item.setAttribute('style','width:'+data['industry_recruit_people_value'][idx]/200*100+'%;')
											})
										}
									})
								</script>
							</div>
						</div>
						<span class="border_bg_leftTop"></span>
						<span class="border_bg_rightTop"></span>
						<span class="border_bg_leftBottom"></span>
						<span class="border_bg_rightBottom"></span>
					</div>
				</div>
			</div>
			<div class="leftMain_middle">
				<div class="leftMain_middle_left" style="width:100%;padding-right:0rem;">
					<div class="leftMain_middle_leftIn">
						<h3>各行业平均薪资</h3>
						<div class="biaoge" style="width:100%; height:25vh" id="chartmain_zhe"></div>
						<script type="text/javascript">
							$.({
								url: "/static/page_data/page_data.json",//同文件夹下的json文件路径
								type: "GET",//请求方式为get
								dataType: "json", //返回数据格式为json
								success: function (data) {//请求成功完成后要执行的方法
									//console.log(data);
									//指定图表的配置项和数据
									option = {
										title: {
											text: ''
										},
										tooltip: {
											trigger: 'axis'
										},
										legend: {
											textStyle: {
												color: '#fff',
												fontSize: 12,
											},
											right: '10%',
											//data: ['企业数目', '平均薪资']
											data: ['行业平均薪资']
										},
										grid: {
											x: 40,
											y: 40,
											x2: 20,
											y2: 20,
										},
										toolbox: {
											feature: {
												//saveAsImage: {}
											}
										},
										xAxis: {
											type: 'category',
											boundaryGap: false,
											axisLabel: {
												/*inside: true,*/
												interval: 0,
												textStyle: {
													color: '#fff',
													fontSize: 12
												}
											},
											axisTick: {
												show: false,
											},
											axisLine: {
												show: true,
												symbol: ['none', 'arrow'],
												symbolOffset: 12,
												lineStyle: {
													color: '#fff',
												}
											},
											data: data['industry_type']
										},
										yAxis: {
											type: 'value',

											axisLine: {
												show: true,
												symbol: ['none', 'arrow'],
												symbolOffset: 12,
												lineStyle: {
													color: '#fff',
												}
											},
											axisTick: {
												show: false
											},
											axisLabel: {
												textStyle: {
													color: '#fff',
													fontSize: 12
												}
											},
											splitLine: {
												show:false
											}
										},
										series: [
											/*{
												name: '企业数目',
												type: 'line',
												stack: '总量',
												data: data['industry_type_value'],
												itemStyle: {
													normal: {
														color: "#0efdff",//折线点的颜色
														lineStyle: {
															color: "#0efdff",//折线的颜色
															width: 2,
														}
													},
												}
											},*/
											{
												name: '行业平均薪资',
												type: 'line',
												stack: '总量',
												data: data['industry_avg_salary'],
												itemStyle: {
													normal: {
														color: "#0efdff",//折线点的颜色
														lineStyle: {
															color: "#0efdff",//折线的颜色
															width: 2,
														}
													},
												}
											},
										]
									};
									//获取dom容器
									var myChart = echarts.init(document.getElementById('chartmain_zhe'));
									// 使用刚指定的配置项和数据显示图表。
									myChart.setOption(option);
								}
							})

						</script>
						<span class="border_bg_leftTop"></span>
						<span class="border_bg_rightTop"></span>
						<span class="border_bg_leftBottom"></span>
						<span class="border_bg_rightBottom"></span>
					</div>
				</div>
			</div>
		</div>
		<div class="rightMain">
			<div class="rightMain_top">
				<div class="rightMain_topIn">
					<h3>学历分布情况</h3>
					<div class="biaoge" style="width:100%; height:30vh" id="chartmain_bing"></div>
					<script type="text/javascript">
						$.ajax({
							url: "/static/page_data/page_data.json",//同文件夹下的json文件路径
							type: "GET",//请求方式为get
							dataType: "json", //返回数据格式为json
							success: function (data) {//请求成功完成后要执行的方法
								option = {
									title: {
										//text: '学历分布情况统计',
										subtext: '',
										left: 'right',
										textStyle: {
											color: '#fff',
											fontSize: 12
										}
									},
									tooltip: {
										trigger: 'item',
										formatter: '{a} <br/>{b} : {c} ({d}%)'
									},
									legend: {
										//orient: 'vertical',
										//top: 'middle',
										type: 'scroll',
										//orient: 'vertical',
										//right: 10,
										//top: 40,
										bottom: 'bottom',
										data: data['degree_type'],
										textStyle: {
											color: '#fff',
											fontSize: 12
										}
									},
									grid: {
										x: '-10%',
										y: 40,
										x2: 20,
										y2: 20,
									},
									color: ['#09d0fb', '#f88cfb', '#95f8fe', '#f9f390', '#ecfeb7'],
									series: [
										{
											name:'学历占比情况',
											type: 'pie',
											radius: '65%',
											center: ['50%', '43%'],
											selectedMode: 'single',
											data: [
												{ value: data['degree_value'][0], name: data['degree_type'][0]},
												{ value: data['degree_value'][1], name: data['degree_type'][1]},
												{ value: data['degree_value'][2], name: data['degree_type'][2]},
												{ value: data['degree_value'][3], name: data['degree_type'][3]},
												{ value: data['degree_value'][4], name: data['degree_type'][4]},
											],
											emphasis: {
												itemStyle: {
													shadowBlur: 10,
													shadowOffsetX: 0,
													shadowColor: 'rgba(0, 0, 0, 0.5)'
												}
											}
										}
									]
								};
								//获取dom容器
								var myChart = echarts.init(document.getElementById('chartmain_bing'));
								// 使用刚指定的配置项和数据显示图表。
								myChart.setOption(option);
							}
						})
					</script>
					<span class="border_bg_leftTop"></span>
					<span class="border_bg_rightTop"></span>
					<span class="border_bg_leftBottom"></span>
					<span class="border_bg_rightBottom"></span>
				</div>
			</div>
			<div class="rightMain_bottom">
				<div class="rightMain_bottomIn">
					<h3>招聘信息看板</h3>
					<div class="biaoge biaoge_list" style="width:100%; height:36vh">
						<div class="biaoge_listIn">
							<ul class="ul_title">
								<li>岗位名称</li>
								<li>城市</li>
								<li>薪资范围</li>
								<li>经验要求</li>
								<li>学历要求</li>
							</ul>
							<div class="ul_list">
								<div class="ul_listIn">
									<ul class="ul_con">
										<li>工程师</li>
										<li>北京</li>
										<li>8k-12k</li>
										<li>2年</li>
										<li>本科</li>
									</ul>
									<ul class="ul_con">
										<li>工程师</li>
										<li>北京</li>
										<li>8k-12k</li>
										<li>2年</li>
										<li>本科</li>
									</ul>
									<ul class="ul_con">
										<li>工程师</li>
										<li>北京</li>
										<li>8k-12k</li>
										<li>2年</li>
										<li>本科</li>
									</ul>
									<ul class="ul_con">
										<li>工程师</li>
										<li>北京</li>
										<li>8k-12k</li>
										<li>2年</li>
										<li>本科</li>
									</ul>
									<ul class="ul_con">
										<li>工程师</li>
										<li>北京</li>
										<li>8k-12k</li>
										<li>2年</li>
										<li>本科</li>
									</ul>
									<ul class="ul_con">
										<li>工程师</li>
										<li>北京</li>
										<li>8k-12k</li>
										<li>2年</li>
										<li>本科</li>
									</ul>
									<ul class="ul_con">
										<li>工程师</li>
										<li>北京</li>
										<li>8k-12k</li>
										<li>2年</li>
										<li>本科</li>
									</ul>
									<ul class="ul_con">
										<li>工程师</li>
										<li>北京</li>
										<li>8k-12k</li>
										<li>2年</li>
										<li>本科</li>
									</ul>
									<ul class="ul_con">
										<li>工程师</li>
										<li>北京</li>
										<li>8k-12k</li>
										<li>2年</li>
										<li>本科</li>
									</ul>
									<ul class="ul_con">
										<li>工程师</li>
										<li>北京</li>
										<li>8k-12k</li>
										<li>2年</li>
										<li>本科</li>
									</ul>
									<ul class="ul_con">
										<li>工程师</li>
										<li>北京</li>
										<li>8k-12k</li>
										<li>2年</li>
										<li>本科</li>
									</ul>
									<ul class="ul_con">
										<li>工程师</li>
										<li>北京</li>
										<li>8k-12k</li>
										<li>2年</li>
										<li>本科</li>
									</ul>
								</div>
							</div>
							<script type="text/javascript">
								$.ajax({
									url: "/static/page_data/page_data.json",//同文件夹下的json文件路径
									type: "GET",//请求方式为get
									dataType: "json", //返回数据格式为json
									success: function (data) {//请求成功完成后要执行的方法
										recruit_info = data['recruit_info']
										let ul_cons = document.querySelectorAll('.ul_con')
										console.log(ul_cons)
										ul_cons.forEach((item,idx)=>{
											item.children[0].innerHTML = recruit_info[idx][0]
											item.children[0].setAttribute('style','overflow:hidden;')
											item.children[1].innerHTML = recruit_info[idx][1]
											item.children[2].innerHTML = recruit_info[idx][2]
											item.children[2].setAttribute('style','overflow:hidden;')
											item.children[3].innerHTML = recruit_info[idx][3]
											item.children[4].innerHTML = recruit_info[idx][4]
										})
									}
								})
							</script>
						</div>

					</div>
					<span class="border_bg_leftTop"></span>
					<span class="border_bg_rightTop"></span>
					<span class="border_bg_leftBottom"></span>
					<span class="border_bg_rightBottom"></span>
				</div>
			</div>
		</div>
		<div style="clear:both;"></div>
	</div>
	<script src="/static/js/jquery.numscroll.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>